<template>

    <div style="background-color: black;text-align: center;" class="sc">
      <el-scrollbar>
      <el-container>

        <el-main>

          <h1 style="color: yellow;font-size: 55px"align="center">JOIN OUR COMMUNITY DISCORD</h1>
          <p style="color: white"align="center">Link up with like-minded players and get involved with what's happening across the Borderlands on our Community Discord server!</p>
          <a href="http:https://discordapp.com/invite/Borderlands">
            <el-button style="color: yellow;margin: 0 auto;background-color: black;border-color: yellow;margin: 10px 10px">JOINNOW</el-button>
          </a><br>
          <img src="https://borderlands.2k.com/assets/WarchestDividersDesktopPrimary.vK9bM8TW.png" style="width: 100%">
          <h1 style="color: yellow;">BORDERLANDS COSPLAY GUIDES</h1>
          <div style="margin-left: 150px">
            <el-row :gutter="10">
              <el-col :span="8" v-for="c in cosArr"style="margin: 10px 0">
                <el-card style="width: 416px;height: 300px;margin: 0 0 30px;background-color: #42b983">
                  <img :src="c.url" style="width: 100%;height: 100%;">
                  <p>
                    <a :href="c.ahref" style="color: yellow;text-decoration: none;font-weight: bold;font-size: 25px;">{{c.title}}</a>
                  </p>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <img src="https://borderlands.2k.com/assets/WarchestDividersDesktopPrimary.vK9bM8TW.png" style="width: 100%">
          <div>
            <el-row :gutter="10">
              <el-col :span="8" v-for="ct in ctoon" style="margin: 10px 0">
                <img :src="ct.url" style="width: 100%;height: 100%;">
              </el-col>
            </el-row>
          </div>

          <img src="imgs/16.png" width="100%">
          <div class="fot">
            <img src="imgs/17.svg" width="50" height="50px" class="fotimg" style="margin-left: 20px">
            <img src="imgs/18.svg" width="50" height="50px" class="fotimg">
            <img src="imgs/19.svg" width="50" height="50px" class="fotimg">
            <img src="imgs/20.svg" width="50" height="50px" class="fotimg">
            <img src="imgs/21.svg" width="50" height="50px" class="fotimg" style="margin-right: 0">
          </div>
          <div class="fot2" style="margin-bottom: 30px">
            <img src="imgs/22.webp" width="100px" style="margin-right: 20px;margin-left: 10px">
            <img src="imgs/23.webp" width="100px" style="margin-right: 0px">
          </div>
          <div style="background-color: black;height: 700px">
          <div style="color: white;text-align: center" class="fott" >
            <ul >
              <li style="margin-left: 20px">隐私权政策</li>
              <li>服务条款</li>
              <li>COOKIE条款</li>
              <li>COOKIE 2K广告合作伙伴</li>
            </ul>
          </div>

          <div style="color: white;text-align: center;margin-top: 20px" class="fotbot" >
            <ul >
              <li >太原学府中学</li>
              <li>项目经理：吴林峰</li>
              <li>班主任：张雨</li>
              <li>小组成员：陈子冬、常浩东、李旋、朱钰灏</li>
            </ul>
          </div>
          </div>
        </el-main>

      </el-container>
      </el-scrollbar>
    </div>

</template>

<script setup>
    import {ref} from "vue";

    const cosArr = ref([
      {title:"Cosplay Guide:Amara",url:'community-img/1.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+Amara.pdf'},
      {title:"Cosplay Guide:FL4K",url:'community-img/2.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+FL4K.pdf'},
      {title:"Cosplay Guide:Moze",url:'community-img/3.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+Moze.pdf'},
      {title:"Cosplay Guide:Zane",url:'community-img/4.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+Zane.pdf'},
      {title:"Cosplay Guide:Tyreen",url:'community-img/5.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+Tyreen.pdf'},
      {title:"Cosplay Guide:Troy",url:'community-img/6.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+Troy.pdf'},
      {title:"Cosplay Guide:Maya",url:'community-img/7.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Maya.pdf'},
      {title:"Cosplay Guide:Tina",url:'community-img/8.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Tina.pdf'},
      {title:"Cosplay Guide:Moxxi",url:'community-img/9.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Moxxi.pdf'},
      {title:"Cosplay Guide:Mordecai",url:'community-img/10.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Mordecai.pdf'},
      {title:"Cosplay Guide:Male Bandit",url:'community-img/11.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3+Cosplay+Guide+-+Psycho+Male.pdf'},
      {title:"Cosplay Guide:Female Bandit",url:'community-img/12.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/thumbs/cos-femalepsycho.jpg'},
      {title:"Cosplay Guide:Krieg",url:'community-img/13.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Krieg.pdf'},
      {title:"Cosplay Guide:Juno",url:'community-img/14.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Juno.pdf'},
      {title:"Cosplay Guide:Rose",url:'community-img/15.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_Rose.pdf'},
      {title:"Anu Character Style GGuide",url:'community-img/16.avif',ahref:'https://cdn.2kgames.com/borderlands/media/NTFTB/Anu_Character_Style_Guide.pdf'},
      {title:"Octavio Character Style Guide",url:'community-img/17.avif',ahref:'https://cdn.2kgames.com/borderlands/media/NTFTB/Octavio_Character_Style_Guide.pdf'},
      {title:"Fran Character Style Guide",url:'community-img/18.avif',ahref:'https://cdn.2kgames.com/borderlands/media/NTFTB/Fran_Character_Style_Guide.pdf'},
      {title:"LOU13 Character Style Guide",url:'community-img/19.avif',ahref:'https://cdn.2kgames.com/borderlands/media/NTFTB/L0U13_Character_Style_Guide.pdf'},
      {title:"Cosplay Guide:Multiverse DotVAmara",url:'community-img/20.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_DOTV_Amara.pdf'},
      {title:"Cosplay Guide:Multiverse DotVFL4K",url:'community-img/21.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_DOTV_FL4K.pdf'},
      {title:"Cosplay Guide:Multiverse DotVMoze",url:'community-img/22.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_DOTV_MOZE.pdf'},
      {title:"Cosplay Guide:Multiverse DotVZane",url:'community-img/23.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_DOTV_ZANE.pdf'},
      {title:"Cosplay Guide:Multiverse Final Form Amara",url:'community-img/24.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_FF_AMARA.pdf'},
      {title:"Cosplay Guide:Multiverse Final Form FL4K",url:'community-img/25.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_FF_FL4K.pdf'},
      {title:"Cosplay Guide:Multiverse Final Form Moze",url:'community-img/26.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_FF_MOZE.pdf'},
      {title:"Cosplay Guide:Multiverse Final Form Zane",url:'community-img/27.avif',ahref:'https://cdn.2kgames.com/borderlands/cosplay-guides/BL3_Cosplay_Guide_FF_ZANE.pdf'},
    ]);

    const ctoon = ref([
      {url:'community2-img/1.avif'},
      {url:'community2-img/2.avif'},
      {url:'community2-img/3.avif'},
      {url:'community2-img/4.avif'},
      {url:'community2-img/5.avif'},
      {url:'community2-img/6.avif'},
      {url:'community2-img/7.avif'},
      {url:'community2-img/8.avif'},
      {url:'community2-img/9.avif'},
      {url:'community2-img/10.avif'},
      {url:'community2-img/11.avif'},
      {url:'community2-img/12.avif'},
    ]);
</script>

<style scoped>
.sc{
  width: 100%;
  height: 100%;
  left: 0;
  border-color: black;
  position: fixed;
}
</style>